<template>
    <div class="body tixian" v-if="tixianshow">
        <div class="tx_top">
            <p v-html="suerTixian.ktxje-suerTixian.dsh">350.36</p>
            <div>账户总额 (元)</div>
            <dl>
                <dd>
                    <i v-html="suerTixian.dsh">69.78</i>
                    <a>待审核(元)</a>
                </dd>
                <dt></dt>
                <dd>
                    <i v-html="suerTixian.ytxje">249</i>
                    <a>已提现(元)</a>
                </dd>
            </dl>
        </div>

        <div class="te_je">
            <p>提现金额</p>
            <div class="">
                <input type="text" placeholder="请输入提现金额(大于10元)" value="" v-model="mound">
                <i>元</i>
            </div>
        </div>

        <div class="te_typ" style="padding-bottom: 2rem;">
            <p>支付类型</p>
            <dl>
                <dd></dd>
                <dt>支付宝</dt>
            </dl>

            <div class="">
                <span>支付宝账号</span>
                <input style="width: 3.8rem;" type="text" placeholder="请输入支付宝账号" v-model="zhanghu">
            </div>
            <div class="">
                <span>支付宝真实姓名</span>
                <input style="width:3.8rem;" type="text" placeholder="请输入支付宝正式姓名" v-model="username">
            </div>
        </div>

        <div class="te_btn" @click="turnTixian()">立即提现</div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import { Indicator } from 'mint-ui';
    export default {
        name: "tixian",
        data() {
            return {
                suerTixian: {},
                tixianshow: false,
                mound: "",
                zhanghu: "",
                username: "",
                tixianstatus:true,

                tixianzhuangtai:true,
            }
        },
        mounted() {
            this.tixianstatus = true;
            this.$store.state.navTabstatu = 1;
            this.userTixian();
        },
        methods: {
            userTixian() {
                this.axios({
                    method: 'get',
                    url: 'apis/partner/txje',
                    data: {},
                    withCredentials: true,
                    headers: {'token': JSON.parse(localStorage.hhrdata).token},
                }).then((response) => {
                    console.log(response)
                    if (response.data.code == -8) {
                        this.common.checkLogin(this);
                    }
                    this.suerTixian = response.data.data;
                    this.tixianshow = true;
                }).catch((error) => {
                    console.log(error)
                });
            },
            turnTixian() {
                if(!this.tixianzhuangtai){
                    return
                }
                this.tixianzhuangtai = false;

                Indicator.open('提现中。。。');

                if (this.mound == "" || this.zhanghu == "" || this.username == "") {
                    Toast({
                        message: "请填写信息",
                        position: 'center',
                        duration: 2000
                    });
                    setTimeout(()=>{
                        this.tixianzhuangtai = true;
                        Indicator.close();
                    },2000)
                    return
                }
                if(!(/^[0-9]*$/.test(this.mound))){
                    Toast({
                        message: '请输入正确的提现金额',
                        position: 'center',
                        duration: 2000
                    });
                    setTimeout(()=>{
                        this.tixianzhuangtai = true;
                        Indicator.close();
                    },2000)
                    return
                }
                if(this.mound>(this.suerTixian.ktxje-this.suerTixian.dsh)){
                   Toast({
                        message: '您的提现金额超过总金额',
                        position: 'center',
                        duration: 2000
                    });
                    setTimeout(()=>{
                        this.tixianzhuangtai = true;
                        Indicator.close();
                    },2000)
                    return
                }
                if(parseInt(this.mound)<10){
                    Toast({
                        message: '金额大于10元才可以发起提现',
                        position: 'center',
                        duration: 2000
                    });
                    setTimeout(()=>{
                        this.tixianzhuangtai = true;
                        Indicator.close();
                    },2000)
                    return
                }
                if(!this.tixianstatus){
                    Indicator.close();
                    this.tixianzhuangtai = true;
                    return
                }
                this.tixianstatus = false;
                this.axios({
                    method: 'post',
                    url: '/apis/partner/tixian',
                    data: this.qs.stringify({
                        money: this.mound,
                        zfbAccount: this.zhanghu,
                        zfbName: this.username
                    }),
                    // data: {
                    //     money:this.mound,
                    //     zfbAccount:this.zhanghu,
                    //     zfbName:this.username
                    // },
                    headers: {'token': JSON.parse(localStorage.hhrdata).token},
                    withCredentials: true,
                }).then((response) => {
                    console.log(response)
                    setTimeout(()=>{
                        Indicator.close();
                        this.tixianzhuangtai = true;
                    },2000)
                    if (response.data.code == -8) {
                        this.common.checkLogin(this);
                    }
                    if (response.data.code == 0) {
                        Toast({
                            message: "发起提现成功",
                            position: 'center',
                            duration: 2000
                        });
                        this.tixianstatus = true;
                        this.mound = "";
                        this.userTixian();
                    }
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .tixian {
        background: rgba(244, 244, 244, 1);

        .tx_top {
            background: rgba(38, 119, 249, 0.9);
            height: 4.2rem;
            overflow: hidden;
            position: relative;

            p {
                font-size: 0.6rem;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                margin-top: 1rem;
            }

            div {
                font-size: 0.24rem;
                font-weight: 400;
                color: rgba(230, 240, 255, 1);
                text-align: center;
                margin-top: 0.1rem;
            }

            dl {
                height: 1.2rem;
                background: rgba(0, 0, 0, 0.2);
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;

                dd {
                    float: left;
                    width: 3.74rem;
                    height: 1.2rem;
                    text-align: center;

                    i {
                        display: block;
                        color: rgba(230, 240, 255, 1);
                        margin-top: 0.15rem;
                    }

                    a {
                        display: block;
                        margin-top: 0.05rem;
                        color: rgba(230, 240, 255, 1);
                    }
                }

                dt {
                    float: left;
                    width: 0.02rem;
                    height: 0.5rem;
                    background: rgba(58, 131, 249, 1);
                    margin: 0.35rem 0;
                }
            }
        }

        .te_je {
            height: 2.15rem;
            background: #fff;
            margin-top: 0.2rem;
            overflow: hidden;

            p {
                padding: 0 0.4rem;
                font-size: 0.3rem;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                margin-top: 0.3rem;
            }

            div {
                margin-top: 0.3rem;
                padding: 0 0.4rem;
                overflow: hidden;
                line-height: 1rem;

                input {
                    font-size: 0.6rem;
                    font-weight: 500;
                    color: rgba(58, 131, 249, 1);
                    float: left;
                    border: 0;
                    width: 5rem;
                    line-height: 1.1rem;
                }

                i {
                    font-size: 0.36rem;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);
                    float: right;
                    line-height: 1.2rem;
                }
            }
        }

        .te_typ {
            overflow: hidden;
            height: 4rem;
            margin-top: 0.2rem;
            background: #fff;
            padding: 0 0.3rem;

            p {
                font-size: 0.3rem;
                font-weight: 500;
                padding: 0 0.1rem;
                color: rgba(51, 51, 51, 1);
                margin-top: 0.3rem;
            }

            dl {
                height: 0.5rem;
                margin: 0.3rem 0;

                dd {
                    float: left;
                    width: 0.3rem;
                    height: 0.3rem;
                    margin: 0.1rem;
                    box-sizing: border-box;
                    border: 0.07rem solid rgba(35, 106, 246, 1);
                    border-radius: 50%;
                }

                dt {
                    float: left;
                    font-size: 0.32rem;
                    line-height: 0.5rem;
                    margin-left: 0.1rem;
                }
            }

            div {
                height: 1.1rem;
                border-top: 0.01rem solid rgba(237, 237, 237, 1);
                line-height: 1.1rem;

                span {
                    font-size: 0.3rem;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);
                    float: left;
                    width: 2.2rem;
                }

                input {
                    float: left;
                    height: 0.5rem;
                    padding: 0.1rem 0.2rem;
                    margin: 0.2rem;
                    border: 0;
                    font-size: 0.3rem;
                }
            }
        }

        .te_btn {
            height: 1rem;
            background: rgba(35, 106, 246, 1);
            text-align: center;
            line-height: 1rem;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            color: #fff;

            font-size: 0.32rem;
            cursor: pointer;
        }
    }
</style>
